<!-- 「编辑团队资料」页面 -->
<template>
  <div class="container">
    <div class="my-avatar">
      <!-- 修改头像用的透明按钮 -->
      <button
        class="edit-avatar-btn"
        :disabled="!isTeamCaptain"
        open-type="chooseAvatar"
        @chooseavatar="chooseAvatar"
      />
      <div class="text">
        编辑团队头像
      </div>
      <image
        class="img mid"
        :src="temAvatarPath
          || teamInviteCompetition?.teamAvatar
          || '/src/static/images/common/default-avatar.png'"
        mode="aspectFill"
      />
      <image
        class="arrow"
        src="@/static/icons/common/arrow.png"
        mode="aspectFill"
      />
    </div>
    <div
      class="my-nickname"
      @click="onClickNickname"
    >
      <div class="text">
        团队名称
      </div>
      <div class="nickname mid">
        {{ teamNickname }}
      </div>
      <image
        class="arrow"
        src="@/static/icons/common/arrow.png"
        mode="aspectFill"
      />
    </div>
    <!-- 确认按钮 -->
    <button
      class="confirm-btn"
      :class="{ 'confirm-btn--disabled':!isTeamCaptain }"
      @click="completeClick"
    >
      确认
    </button>
  </div>
  <!-- 输入昵称弹窗 -->
  <uni-popup
    ref="editNicknamePopup"
    :is-mask-click="false"
    mask-background-color="rgba(0,0,0,.6)"
  >
    <div class="popup-container">
      <!-- 中间的弹窗 -->
      <div class="popup">
        <div class="title">
          编辑团队名称
        </div>
        <input
          :value="teamNickname"
          class="input"
          placeholder="请输入昵称"
          placeholder-style="color: #9f9f9f;"
          :maxlength="20"
          @input="inputNickname"
        >
        <div
          class="btn confirm-btn"
          @click="editNicknameConfirm"
        >
          确定
        </div>
      </div>
      <!-- 关闭按钮 -->
      <img
        class="close-btn"
        src="@/static/icons/common/close.png"
        @click="toggleEditNicknamePopup(false)"
      >
    </div>
  </uni-popup>
</template>

<script lang="ts" setup>
import { reqEditTeamInfo } from '@/api/activity-202310-api';
import { reqUploadImage } from '@/api/api-others';
import { useActivity202310 } from '@/stores/activity-202310-store';
import { back } from '@/utils/navigate';
import { showToast } from '@/utils/tools';

const activity202310Store = useActivity202310();
const { teamInviteCompetition, isTeamCaptain } = storeToRefs(activity202310Store);
const { setTeamInviteCompetitionData } = activity202310Store;

const currentInstance = getCurrentInstance();

// #region 检查并获取数据

/** 检查是否有团队信息 */
const checkTeamInfo = () => {
  if (!teamInviteCompetition.value) {
    setTeamInviteCompetitionData();
  }
};

onShow(() => {
  checkTeamInfo();
});

// #region 编辑头像相关

/** 临时头像地址 */
const temAvatarPath = ref('');

/** 临时昵称变量 */
const teamNickname = ref(teamInviteCompetition.value?.teamName);

watch(
  () => teamInviteCompetition.value?.teamName,
  (newVal) => {
    teamNickname.value = newVal || '';
    console.log('temNickname', teamNickname.value);
  },
);

/** 头像选择事件 */
const chooseAvatar = (e: any) => {
  temAvatarPath.value = e.detail.avatarUrl;
};

/** 「确定」按钮点击事件 */
const completeClick = async () => {
  if (!isTeamCaptain.value) {
    showToast('请联系团队队长修改资料');
    return;
  }

  // 检查是否有头像和昵称
  if (!temAvatarPath.value && !teamInviteCompetition.value?.teamAvatar) {
    showToast('请上传头像');
    return;
  }

  if (!teamNickname) {
    showToast('请填写昵称');
    return;
  }

  if (!temAvatarPath.value && teamNickname.value === teamInviteCompetition.value?.teamName) {
    back();
    return;
  }

  if (teamInviteCompetition.value?.teamName) {
    teamInviteCompetition.value.teamName = teamNickname.value || '';
  }

  try {
    const newAvatar = temAvatarPath.value
      ? (await reqUploadImage(temAvatarPath.value)).fileUrl
      : teamInviteCompetition.value?.teamAvatar;
    // 更新头像和昵称
    const editRes = await reqEditTeamInfo({
      teamAvatar: newAvatar,
      teamName: teamNickname.value,
    });
    if (editRes.data.code === 200) {
      setTeamInviteCompetitionData();
      showToast('编辑资料成功');
      back();
      return;
    }

    showToast('编辑资料失败');
    return;
  } catch (e) {
    console.error('编辑资料失败', e);
    showToast('编辑资料失败');
  }
};

// #endregion

// #region 编辑昵称相关

/** 「修改昵称」弹窗输入内容 */
const inputContent = ref(teamNickname.value);

const editNicknamePopup = ref<UniHelper.UniPopup>();

/**
 * 「修改昵称」弹窗切换显示
 * @param isShow 是否显示
 */
const toggleEditNicknamePopup = (isShow = false) => {
  switch (isShow) {
    case false:
      editNicknamePopup.value?.close();
      break;
    case true:
      editNicknamePopup.value?.open();
      break;
    default:
      break;
  }
};

const onClickNickname = () => {
  if (!isTeamCaptain.value) {
    showToast('请联系团队队长修改昵称');
    return;
  }

  toggleEditNicknamePopup(true);
};

/** 昵称输入事件 */
const inputNickname = (e: any) => {
  inputContent.value = e.detail.value;
};

/** 「修改昵称」弹窗确定按钮点击事件 */
const editNicknameConfirm = () => {
  if (inputContent.value === '') {
    showToast('请输入昵称');
    return;
  }
  teamNickname.value = inputContent.value;
  toggleEditNicknamePopup(false);
};

// #endregion
</script>

<style lang="scss" scoped>
.container {
  width: 100vw;
  height: 100vh;

  background: $page-bg-color;

  padding: 0 16px;
  display: grid;
  grid-template:
    "." 20px
    "avatar" 13.8462vw
    "nickname" 13.8462vw
    '.' 181px
    "confirm-btn" 1fr
    '.' 1fr
    / 1fr;

  // grid-template-rows: 20px 13.8462vw 13.8462vw 1fr;
  grid-template-columns: 1fr;
  ;

  // 我的头像和我的昵称的共有样式
  .my-avatar,
  .my-nickname {
    background: #fff;

    padding: 0 16px;
    display: grid;
    grid-template:
        "text mid arrow" 1fr / max-content 1fr 36px;
    align-items: center;
    justify-items: end;

    .text {
      grid-area: text;

      font-size: 16px;
      color: #333;
    }

    .mid {
      grid-area: mid;

      border-radius: 50%;
    }

    .arrow {
      grid-area: arrow;

      width: 16px;
      height: 16px;
    }
  }

  // 我的头像
  .my-avatar {
    grid-area: avatar;

    position: relative;

    // 下边框颜色为#ccc再加上40%的透明度
    border-bottom: 1px solid rgb(204 204 204 / 60%);
    border-top-left-radius: 23rpx;
    border-top-right-radius: 23rpx;

    .edit-avatar-btn {
      position: absolute;
      top: 0;
      left: 0;

      width: 100%;
      height: 100%;

      opacity: 0;
    }

    .img {
      width: 40px;
      height: 40px;

      border-radius: 50%;
    }
  }

  // 我的昵称
  .my-nickname {
    grid-area: nickname;
    border-bottom-left-radius: 23rpx;
    border-bottom-right-radius: 23rpx;

    .nickname {
      font-size: 16px;
      color: #999;
    }
  }

  .confirm-btn {
    grid-area: confirm-btn;
    align-self: center;
    justify-self: center;

    width: 342px;
    height: 42px;

    background: $button-bg;

    font-size: 4.1026vw;
    color: #fff;
    border-radius: 92rpx;

    &--disabled {
      background: #ccc;

      color: #999;
    }
  }
}

// 「修改昵称」弹窗
.popup-container {
  width: 76.9231vw;

  display: grid;
  grid-template-rows: 1fr auto;
  grid-template-columns: 1fr;
  grid-row-gap: 39px;
  justify-items: center;

  // 弹窗主体
  .popup {
    position: relative;

    width: 76.9231vw;

    background: #fff;
    border-radius: 4px;

    padding: 16px;
    display: grid;
    grid-template:
      'title' 21px
      '.' 12px
      'input' 1fr
      '.' 40px
      'btn' 36px;
    justify-items: center;

    // 标题
    .title {
      grid-area: title;

      font-size: 3.8462vw;
      color: #333;
    }

    // 输入框
    .input {
      grid-area: input;
      align-self: center;

      width: calc(76.9231vw - 32px);
      min-height: 10.5128vw;

      border: 1px solid #D7D7D7;
      border-radius: 4px;

      padding-left: 10px;
      box-sizing: border-box;

      font-size: 3.8462vw;

      // 文字两端对齐
      text-align: justify;

      // 占位文字样式
      &::moz-placeholder {
        color: red;
      }

    }

    // 「确定」按钮
    .btn {
      grid-area: btn;

      width: 68.7179vw;

      background: $button-bg;
      border-radius: 4px;

      // 文字居中
      display: flex;
      align-items: center;
      justify-content: center;

      font-size: 3.5897vw;
      color: #fff;
    }
  }

  // 取消按钮
  .close-btn {
    width: 8.7179vw;
    height: 8.7179vw;
  }
}
</style>
